<template>
  <div :key="collectedSiteData.name" class="collected_site_data"
       style="display: inline-block;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
    <a :href="collectedSiteData.url" :title="collectedSiteData.remark" target="_blank">
      <el-image :src="collectedSiteData.ico" style="height: 50px; width: 55px">
        <div slot="error" class="image-slot">
          <img src="../assets/logo.png" style="height: 50px; width: 55px" alt="">
        </div>
      </el-image>
      <br>
      {{ collectedSiteData.name }}
    </a>
  </div>
</template>

<script>
import { CollectedSiteEntity } from '@/assets/js/panel'

export default {
  name: 'CollectedSiteDataComponent',
  data: function () {
    return {}
  },
  props: {
    collectedSiteData: {
      type: CollectedSiteEntity,
      required: true
    }
  }
}
</script>

<style scoped>
.collected_site_data a {
  text-decoration-line: none;
  color: #2E2E2E;
}

.collected_site_data {
  width: 140px;
  height: 100px;
  text-align: center;;
}

.collected_site_data:hover {
  background-color: aliceblue;
}

.collected_site_data a:hover {
  color: dodgerblue;
}
</style>
